<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="generator" content="VuePress 2.0.0-beta.51">
    <script>
      (function() {
        const userMode = localStorage.getItem('vuepress-reco-color-scheme') || 'auto';
        const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

        if (userMode === 'dark' || (userMode === 'auto' && systemDarkMode)) {
          document.documentElement.classList.toggle('dark', true);
        }
      })();
    </script>
    <link rel="icon" href="/blog/images/logo.png"><link rel="stylesheet" href="/blog/css/common.scss"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><script language="javascript" type="text/javascript" src="/blog/js/jquery.min.js"></script><title>创建一个electron项目 | hhのBlog</title><meta name="description" content="A blog about work and life">
    <link rel="modulepreload" href="/blog/assets/app.af94fc38.js"><link rel="modulepreload" href="/blog/assets/20221108.html.9e6fc05c.js"><link rel="modulepreload" href="/blog/assets/20221108.html.4bd4ca47.js"><link rel="prefetch" href="/blog/assets/index.html.66bbb558.js"><link rel="prefetch" href="/blog/assets/demo.html.5b7805fb.js"><link rel="prefetch" href="/blog/assets/20221108.html.f09e60bb.js"><link rel="prefetch" href="/blog/assets/Canvas_2022111301.html.ec3c03ed.js"><link rel="prefetch" href="/blog/assets/Canvas_2022111302.html.f6e335a9.js"><link rel="prefetch" href="/blog/assets/Canvas_2022111303.html.c0dc6265.js"><link rel="prefetch" href="/blog/assets/CSS_2022111401.html.5f0453af.js"><link rel="prefetch" href="/blog/assets/20221115.html.324de47f.js"><link rel="prefetch" href="/blog/assets/20221116.html.0d3a3d59.js"><link rel="prefetch" href="/blog/assets/js01example.html.7d266980.js"><link rel="prefetch" href="/blog/assets/js01基础.html.0408303d.js"><link rel="prefetch" href="/blog/assets/js02域名.html.2f781f87.js"><link rel="prefetch" href="/blog/assets/js03保留小数.html.52d104e4.js"><link rel="prefetch" href="/blog/assets/js04常用正则.html.91ba30f3.js"><link rel="prefetch" href="/blog/assets/js05定时器.html.3304c7db.js"><link rel="prefetch" href="/blog/assets/01相关命令.html.d137a3a8.js"><link rel="prefetch" href="/blog/assets/NodeJs_2022111301.html.a182f227.js"><link rel="prefetch" href="/blog/assets/NodeJs_2022111302.html.da1bce3a.js"><link rel="prefetch" href="/blog/assets/NodeJs_2022111303.html.d48c88c8.js"><link rel="prefetch" href="/blog/assets/NodeJs_2022111304.html.82c5514a.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111201.html.440c0e4b.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111202.html.e6a8a1db.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111203.html.f1426fe0.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111204.html.e10b7300.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111205.html.4103afd7.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111206.html.d2a54f87.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111207.html.3e95d323.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111208.html.e09e295e.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111209.html.2b200f73.js"><link rel="prefetch" href="/blog/assets/Vue3_2022111301.html.21919b21.js"><link rel="prefetch" href="/blog/assets/Vue_2022111301.html.ef40b3e0.js"><link rel="prefetch" href="/blog/assets/Vuex_2022111301.html.86e597e2.js"><link rel="prefetch" href="/blog/assets/Vuex_2022111302.html.7e66ee69.js"><link rel="prefetch" href="/blog/assets/Vuex_2022111303.html.631f3db6.js"><link rel="prefetch" href="/blog/assets/vue2-10-下载文件流.html.f941e773.js"><link rel="prefetch" href="/blog/assets/2023.html.9b68f9e4.js"><link rel="prefetch" href="/blog/assets/info.html.a848c235.js"><link rel="prefetch" href="/blog/assets/guide.html.e425151d.js"><link rel="prefetch" href="/blog/assets/前端技术集合.html.cf2a3b37.js"><link rel="prefetch" href="/blog/assets/index.html.d2d3b8ef.js"><link rel="prefetch" href="/blog/assets/01简介.html.40ba5a67.js"><link rel="prefetch" href="/blog/assets/Button.html.8c129817.js"><link rel="prefetch" href="/blog/assets/api.html.e0d147e4.js"><link rel="prefetch" href="/blog/assets/home.html.e1e35d1b.js"><link rel="prefetch" href="/blog/assets/home1.html.e4c04026.js"><link rel="prefetch" href="/blog/assets/home2.html.58a624a1.js"><link rel="prefetch" href="/blog/assets/plugin.html.b944638b.js"><link rel="prefetch" href="/blog/assets/theme.html.5ff8341a.js"><link rel="prefetch" href="/blog/assets/info.html.de54f66c.js"><link rel="prefetch" href="/blog/assets/mac上使用iterm2.html.93ceff56.js"><link rel="prefetch" href="/blog/assets/账号网站合集.html.8f9d6378.js"><link rel="prefetch" href="/blog/assets/面试题2022111401.html.475fb69e.js"><link rel="prefetch" href="/blog/assets/info.html.3ee938b6.js"><link rel="prefetch" href="/blog/assets/overtime.html.a3b609ca.js"><link rel="prefetch" href="/blog/assets/password.html.f40ffe93.js"><link rel="prefetch" href="/blog/assets/project.html.e6805471.js"><link rel="prefetch" href="/blog/assets/实验室检测.html.8cf7547b.js"><link rel="prefetch" href="/blog/assets/智慧检测平台.html.dd52a4be.js"><link rel="prefetch" href="/blog/assets/跨维产品菜单整理20230203.html.450b6471.js"><link rel="prefetch" href="/blog/assets/404.html.98e87f94.js"><link rel="prefetch" href="/blog/assets/index.html.72ac4063.js"><link rel="prefetch" href="/blog/assets/index.html.8cbdf524.js"><link rel="prefetch" href="/blog/assets/index.html.ce338eac.js"><link rel="prefetch" href="/blog/assets/index.html.73c4a578.js"><link rel="prefetch" href="/blog/assets/index.html.d75650eb.js"><link rel="prefetch" href="/blog/assets/index.html.c5770dab.js"><link rel="prefetch" href="/blog/assets/index.html.d5122042.js"><link rel="prefetch" href="/blog/assets/index.html.c0a5e9ba.js"><link rel="prefetch" href="/blog/assets/index.html.51ae8525.js"><link rel="prefetch" href="/blog/assets/index.html.e53514d3.js"><link rel="prefetch" href="/blog/assets/index.html.09988c79.js"><link rel="prefetch" href="/blog/assets/index.html.eb108376.js"><link rel="prefetch" href="/blog/assets/index.html.2f61b3ca.js"><link rel="prefetch" href="/blog/assets/index.html.08946a35.js"><link rel="prefetch" href="/blog/assets/index.html.e695e9c9.js"><link rel="prefetch" href="/blog/assets/index.html.3d66ccdd.js"><link rel="prefetch" href="/blog/assets/index.html.1ff935f2.js"><link rel="prefetch" href="/blog/assets/index.html.a3ad1cd1.js"><link rel="prefetch" href="/blog/assets/index.html.b57762aa.js"><link rel="prefetch" href="/blog/assets/index.html.08b3a957.js"><link rel="prefetch" href="/blog/assets/index.html.9cbf2d78.js"><link rel="prefetch" href="/blog/assets/index.html.4bc70fa1.js"><link rel="prefetch" href="/blog/assets/index.html.faf16132.js"><link rel="prefetch" href="/blog/assets/demo.html.a850e9b9.js"><link rel="prefetch" href="/blog/assets/20221108.html.46471f50.js"><link rel="prefetch" href="/blog/assets/Canvas_2022111301.html.a5e91418.js"><link rel="prefetch" href="/blog/assets/Canvas_2022111302.html.ff7102b1.js"><link rel="prefetch" href="/blog/assets/Canvas_2022111303.html.bd8b572a.js"><link rel="prefetch" href="/blog/assets/CSS_2022111401.html.be8e29c7.js"><link rel="prefetch" href="/blog/assets/20221115.html.5e544c67.js"><link rel="prefetch" href="/blog/assets/20221116.html.663a1bdb.js"><link rel="prefetch" href="/blog/assets/js01example.html.e7f57aff.js"><link rel="prefetch" href="/blog/assets/js01基础.html.2e918579.js"><link rel="prefetch" href="/blog/assets/js02域名.html.d1b1bae3.js"><link rel="prefetch" href="/blog/assets/js03保留小数.html.f3c8d2f4.js"><link rel="prefetch" href="/blog/assets/js04常用正则.html.4266e782.js"><link rel="prefetch" href="/blog/assets/js05定时器.html.444cce0c.js"><link rel="prefetch" href="/blog/assets/01相关命令.html.81697624.js"><link rel="prefetch" href="/blog/assets/NodeJs_2022111301.html.1f3a3c9d.js"><link rel="prefetch" href="/blog/assets/NodeJs_2022111302.html.db8d0905.js"><link rel="prefetch" href="/blog/assets/NodeJs_2022111303.html.3ab1d537.js"><link rel="prefetch" href="/blog/assets/NodeJs_2022111304.html.f4686d41.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111201.html.b263cecf.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111202.html.348b7b89.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111203.html.047acc5f.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111204.html.0d2896ce.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111205.html.9768009b.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111206.html.f1e0fa5e.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111207.html.9b090633.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111208.html.daad8d06.js"><link rel="prefetch" href="/blog/assets/Vue2_2022111209.html.7fedd35c.js"><link rel="prefetch" href="/blog/assets/Vue3_2022111301.html.21fe75fc.js"><link rel="prefetch" href="/blog/assets/Vue_2022111301.html.2d5e0d45.js"><link rel="prefetch" href="/blog/assets/Vuex_2022111301.html.60c6a791.js"><link rel="prefetch" href="/blog/assets/Vuex_2022111302.html.751868dc.js"><link rel="prefetch" href="/blog/assets/Vuex_2022111303.html.3fa18bdf.js"><link rel="prefetch" href="/blog/assets/vue2-10-下载文件流.html.b6206ee7.js"><link rel="prefetch" href="/blog/assets/2023.html.0936ae58.js"><link rel="prefetch" href="/blog/assets/info.html.a1a68d8b.js"><link rel="prefetch" href="/blog/assets/guide.html.8a368790.js"><link rel="prefetch" href="/blog/assets/前端技术集合.html.9ca234a3.js"><link rel="prefetch" href="/blog/assets/index.html.edaee29a.js"><link rel="prefetch" href="/blog/assets/01简介.html.5ef2778e.js"><link rel="prefetch" href="/blog/assets/Button.html.af92d008.js"><link rel="prefetch" href="/blog/assets/api.html.f4fa47e2.js"><link rel="prefetch" href="/blog/assets/home.html.e09d15f1.js"><link rel="prefetch" href="/blog/assets/home1.html.08d478e3.js"><link rel="prefetch" href="/blog/assets/home2.html.0a335270.js"><link rel="prefetch" href="/blog/assets/plugin.html.bc46a390.js"><link rel="prefetch" href="/blog/assets/theme.html.73112f00.js"><link rel="prefetch" href="/blog/assets/info.html.b09899b8.js"><link rel="prefetch" href="/blog/assets/mac上使用iterm2.html.129f6a2b.js"><link rel="prefetch" href="/blog/assets/账号网站合集.html.f39ea8dc.js"><link rel="prefetch" href="/blog/assets/面试题2022111401.html.51141716.js"><link rel="prefetch" href="/blog/assets/info.html.8f33962c.js"><link rel="prefetch" href="/blog/assets/overtime.html.6b269d77.js"><link rel="prefetch" href="/blog/assets/password.html.1ccccfa6.js"><link rel="prefetch" href="/blog/assets/project.html.1ac0116d.js"><link rel="prefetch" href="/blog/assets/实验室检测.html.811b00ea.js"><link rel="prefetch" href="/blog/assets/智慧检测平台.html.74f12da9.js"><link rel="prefetch" href="/blog/assets/跨维产品菜单整理20230203.html.d8e60b11.js"><link rel="prefetch" href="/blog/assets/404.html.761b14a0.js"><link rel="prefetch" href="/blog/assets/index.html.3156a3ca.js"><link rel="prefetch" href="/blog/assets/index.html.0ac8c580.js"><link rel="prefetch" href="/blog/assets/index.html.17c3e87f.js"><link rel="prefetch" href="/blog/assets/index.html.11c9aab7.js"><link rel="prefetch" href="/blog/assets/index.html.4e5ab5fd.js"><link rel="prefetch" href="/blog/assets/index.html.800eacc8.js"><link rel="prefetch" href="/blog/assets/index.html.65e76f2c.js"><link rel="prefetch" href="/blog/assets/index.html.3b91d0bf.js"><link rel="prefetch" href="/blog/assets/index.html.59b51092.js"><link rel="prefetch" href="/blog/assets/index.html.f939c3c1.js"><link rel="prefetch" href="/blog/assets/index.html.de2abe69.js"><link rel="prefetch" href="/blog/assets/index.html.739bd11b.js"><link rel="prefetch" href="/blog/assets/index.html.2d86bd8b.js"><link rel="prefetch" href="/blog/assets/index.html.b093f5ce.js"><link rel="prefetch" href="/blog/assets/index.html.c0a0758f.js"><link rel="prefetch" href="/blog/assets/index.html.3ec16541.js"><link rel="prefetch" href="/blog/assets/index.html.72ba4570.js"><link rel="prefetch" href="/blog/assets/index.html.67fe3a27.js"><link rel="prefetch" href="/blog/assets/index.html.28a05aba.js"><link rel="prefetch" href="/blog/assets/index.html.5342a2c2.js"><link rel="prefetch" href="/blog/assets/index.html.c1a1958b.js"><link rel="prefetch" href="/blog/assets/index.html.267fccd4.js"><link rel="prefetch" href="/blog/assets/reco-valine.ed4545b0.js"><link rel="prefetch" href="/blog/assets/Button.a2ab7687.js"><link rel="prefetch" href="/blog/assets/Demo.3e2abc15.js"><link rel="prefetch" href="/blog/assets/setupDevtools-EXVHPMXB.8c234e79.js">
    <link rel="stylesheet" href="/blog/assets/style.0a08fff0.css">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme-container"><div class="common-wrapper"><div><header class="navbar-container"><span class="nav-item site-brand"><a href="/blog/" class=""><img class="logo" src="/blog/images/logo.png" alt="hhのBlog"><span class="site-name can-hide">hhのBlog</span></a></span><div class="nav-item navbar-links-wrapper" style=""><form class="search-box" role="search"><input type="search" autocomplete="off" spellcheck="false" value><!----></form><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/blog/" class="nav-link" aria-label="Home"><!--[--><!--]--> Home <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/blog/categories/ToDoList/1/" class="nav-link" aria-label="Notes"><!--[--><!--]--> Notes <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/blog/tags/Vue/1/" class="nav-link" aria-label="Tags"><!--[--><!--]--> Tags <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/blog/docs/" class="nav-link" aria-label="work"><!--[--><!--]--> work <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/blog/blogs/_List/info.html" class="nav-link" aria-label="周计划清单"><!--[--><!--]--> 周计划清单 <!--[--><!--]--></a></div><!--]--></nav><a class="icon-container left btn-toggle-dark-mode" href="javascript:void(0)" target="_self"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" style="color:inherit;width:19px;height:19px;font-size:19px;"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3h.393a7.5 7.5 0 0 0 7.92 12.446A9 9 0 1 1 12 2.992z"></path><path d="M17 4a2 2 0 0 0 2 2a2 2 0 0 0-2 2a2 2 0 0 0-2-2a2 2 0 0 0 2-2"></path><path d="M19 11h2m-1-1v2"></path></g></svg><!----></a><a class="icon-container left btn-toggle-menus" href="javascript:void(0)" target="_self"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" style="color:inherit;width:20px;height:20px;font-size:20px;"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="19" r="1"></circle><circle cx="12" cy="5" r="1"></circle></g></svg><!----></a></div></header><div class="mobile-menus-container"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/blog/" class="nav-link" aria-label="Home"><!--[--><!--]--> Home <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/blog/categories/ToDoList/1/" class="nav-link" aria-label="Notes"><!--[--><!--]--> Notes <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/blog/tags/Vue/1/" class="nav-link" aria-label="Tags"><!--[--><!--]--> Tags <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/blog/docs/" class="nav-link" aria-label="work"><!--[--><!--]--> work <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/blog/blogs/_List/info.html" class="nav-link" aria-label="周计划清单"><!--[--><!--]--> 周计划清单 <!--[--><!--]--></a></div><!--]--></nav><div class="appearance"><span>Appearance </span><a class="icon-container left btn-toggle-dark-mode" href="javascript:void(0)" target="_self"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" style="color:inherit;width:19px;height:19px;font-size:19px;"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3h.393a7.5 7.5 0 0 0 7.92 12.446A9 9 0 1 1 12 2.992z"></path><path d="M17 4a2 2 0 0 0 2 2a2 2 0 0 0-2 2a2 2 0 0 0-2-2a2 2 0 0 0 2-2"></path><path d="M19 11h2m-1-1v2"></path></g></svg><!----></a></div></div><div class="sidebar-mask"></div><aside class="series-container"><!--[--><!--[--><section class="series-group series-item"><h5 class="series-heading active">Electron</h5><ul><li><!--[--><a aria-current="page" href="/blog/blogs/Electron/20221108.html" class="router-link-active router-link-exact-active nav-link router-link-active series-item active" aria-label="创建一个electron项目"><!--[--><!--]--> 创建一个electron项目 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Electron/20221115.html" class="nav-link series-item" aria-label="使用预加载脚本"><!--[--><!--]--> 使用预加载脚本 <!--[--><!--]--></a><!--]--></li><li><!--[--><a href="/blog/blogs/Electron/20221116.html" class="nav-link series-item" aria-label="vue项目用Electron打包"><!--[--><!--]--> vue项目用Electron打包 <!--[--><!--]--></a><!--]--></li></ul></section><!--]--><!--]--></aside><!--[--><main class="page-container show-series show-catalog"><h1 class="page-title">创建一个electron项目</h1><div class="page-info"><a class="icon-container left" href="javascript:void(0)" target="_self"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" style="color:inherit;width:18px;height:18px;font-size:18px;"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="7" r="4"></circle><path d="M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2"></path></g></svg><span style="color:inherit;font-size:14px;" class="icon-text"><!--[-->hh<!--]--></span></a><a class="icon-container left" href="javascript:void(0)" target="_self"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" style="color:inherit;width:18px;height:18px;font-size:18px;"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v5l3 3"></path></g></svg><span style="color:inherit;font-size:14px;" class="icon-text"><!--[-->2022-11-08 08:00:00<!--]--></span></a><a class="icon-container left" href="javascript:void(0)" target="_self"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" style="color:inherit;width:18px;height:18px;font-size:18px;"><path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg><span style="color:inherit;font-size:14px;" class="icon-text"><!--[-->前端<!--]--></span></a><a class="icon-container left" href="javascript:void(0)" target="_self"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" style="color:inherit;width:18px;height:18px;font-size:18px;"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="8.5" cy="8.5" r="1" fill="currentColor"></circle><path d="M4 7v3.859c0 .537.213 1.052.593 1.432l8.116 8.116a2.025 2.025 0 0 0 2.864 0l4.834-4.834a2.025 2.025 0 0 0 0-2.864L12.29 4.593A2.025 2.025 0 0 0 10.859 4H7a3 3 0 0 0-3 3z"></path></g></svg><span style="color:inherit;font-size:14px;" class="icon-text"><!--[-->Electron<!--]--></span></a><!----></div><div class="theme-reco-default-content"><div><h2 id="electron官网" tabindex="-1"><a class="header-anchor" href="#electron官网" aria-hidden="true">#</a> <a href="https://www.electronjs.org/" target="_blank" rel="noopener noreferrer">Electron官网<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></h2><h2 id="初始化-npm-项目" tabindex="-1"><a class="header-anchor" href="#初始化-npm-项目" aria-hidden="true">#</a> 初始化 npm 项目</h2><p>Electron 应用基于 npm 搭建，以 package.json 文件作为入口点。 首先创建一个文件夹，然后在其中执行 npm init 初始化项目。</p><h4 id="npm" tabindex="-1"><a class="header-anchor" href="#npm" aria-hidden="true">#</a> npm</h4><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token function">mkdir</span> my-Electron-app <span class="token operator">&amp;&amp;</span> <span class="token builtin class-name">cd</span> my-Electron-app
<span class="token function">npm</span> init
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div></div></div><p>这条命令会帮您配置 package.json 中的一些字段。 为本教程的目的，有几条规则需要遵循：</p><ul><li>入口点 应当是 main.js (您很快就会创建它)</li><li>author (作者)、license (开源许可证) 和 description (描述) 可以为任意内容，不过在晚些的 打包应用程序 步骤中可能是需要的。<br> 然后，将 Electron 安装为您项目的 devDependencies，即仅在开发环境需要的额外依赖。<div class="custom-container tip"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M12 8h.01"></path><path d="M11 12h1v4h1"></path></g></svg><p class="custom-container-title">TIP</p><p>❗ 为什么 ELECTRON 是 DEVDEPENDENCY?</p></div>👉 您的应用需要运行 Electron API，因此这听上去可能有点反直觉。 实际上，打包后的应用本身会包含 Electron 的二进制文件，因此不需要将 Electron 作为生产环境依赖。</li></ul><h4 id="npm-1" tabindex="-1"><a class="header-anchor" href="#npm-1" aria-hidden="true">#</a> npm</h4><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token function">npm</span> <span class="token function">install</span> Electron --save-dev
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><div class="custom-container tip"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M12 8h.01"></path><path d="M11 12h1v4h1"></path></g></svg><p class="custom-container-title">TIP</p><p>❗ 如果上述失败了 报错 npm ERR! electron@21.2.2 postinstall: <code>node install.js</code><br> 需要给electron也设置淘宝镜像<br> 给electron设置淘宝镜像</p><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token function">npm</span> config <span class="token builtin class-name">set</span> electron_mirror <span class="token string">&quot;https://npm.taobao.org/mirrors/electron/&quot;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>给npm设置淘宝镜像</p><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token function">npm</span> config <span class="token builtin class-name">set</span> registry https://registry.npm.taobao.org
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>设置完成后要重新 <code>npm install</code></p></div><p>在初始化并且安装完 Electron 之后，您的 package.json 应该长下面这样。 文件夹中会出现一个 node_modules 文件夹，其中包含了 Electron 可执行文件；还有一个 package-lock.json 文件，指定了各个依赖的确切版本。</p><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>
  <span class="token property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;my-Electron-app&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;version&quot;</span><span class="token operator">:</span> <span class="token string">&quot;1.0.0&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;description&quot;</span><span class="token operator">:</span> <span class="token string">&quot;Hello World!&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;main&quot;</span><span class="token operator">:</span> <span class="token string">&quot;main.js&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;author&quot;</span><span class="token operator">:</span> <span class="token string">&quot;YouName&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;license&quot;</span><span class="token operator">:</span> <span class="token string">&quot;MIT&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;devDependencies&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;electron&quot;</span><span class="token operator">:</span> <span class="token string">&quot;19.0.0&quot;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="添加-gitignore-文件" tabindex="-1"><a class="header-anchor" href="#添加-gitignore-文件" aria-hidden="true">#</a> 添加 .gitignore 文件</h2><p><code>.gitignore</code> 指定了哪些文件不需要 Git 追踪版本。 建议您复制一份 <a href="https://github.com/github/gitignore/blob/main/Node.gitignore" target="_blank" rel="noopener noreferrer">GitHub 的 Node.js gitignore 模板<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a> 到您项目的根目录，以避免将 <code>node_modules</code> 文件夹提交到版本控制系统中。[本目录有存档]</p><h2 id="运行-electron-应用" tabindex="-1"><a class="header-anchor" href="#运行-electron-应用" aria-hidden="true">#</a> 运行 Electron 应用</h2><p>参阅 <a href="https://www.electronjs.org/zh/docs/latest/tutorial/process-model" target="_blank" rel="noopener noreferrer">Electron 进程模型 (process model)<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a> 相关文档来了解 Electron 的进程之间是如何协作的。</p><p>您在 package.json 中指定的脚本文件 main 是所有 Electron 应用的入口点。 这个文件控制 主程序 (main process)，它运行在 Node.js 环境里，负责控制您应用的生命周期、显示原生界面、执行特殊操作并管理渲染器进程 (renderer processes)，稍后会详细介绍。</p><p>在继续编写您的 Electron 应用之前，您将使用一个小小的脚本来确保主进程入口点已经配置正确。 在根目录的 main.js 文件中写一行代码：</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">欢迎来到 Electron 👋</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>因为 Electron 的主进程是一个 Node.js 运行时，您可以使用 electron 命令执行任意 Node.js 代码（甚至将其用作 REPL）。 要执行这个脚本，在 package.json 的 scripts 字段中添加一个 start 命令，执行内容为 electron . 。 这个命令会告诉 Electron 在当前目录下寻找主脚本，并以开发模式运行它。</p><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>
  <span class="token property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;my-electron-app&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;version&quot;</span><span class="token operator">:</span> <span class="token string">&quot;1.0.0&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;description&quot;</span><span class="token operator">:</span> <span class="token string">&quot;Hello World!&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;main&quot;</span><span class="token operator">:</span> <span class="token string">&quot;main.js&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;author&quot;</span><span class="token operator">:</span> <span class="token string">&quot;Jane Doe&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;license&quot;</span><span class="token operator">:</span> <span class="token string">&quot;MIT&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;scripts&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;start&quot;</span><span class="token operator">:</span> <span class="token string">&quot;electron .&quot;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token property">&quot;devDependencies&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;electron&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^19.0.0&quot;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="highlight-lines"><br><br><br><br><br><br><br><div class="highlight-line"> </div><div class="highlight-line"> </div><div class="highlight-line"> </div><br><br><br><br></div><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="npm-2" tabindex="-1"><a class="header-anchor" href="#npm-2" aria-hidden="true">#</a> npm</h4><div class="language-bash ext-sh line-numbers-mode"><pre class="language-bash"><code><span class="token function">npm</span> run start
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>您的终端应该会输出 <code>欢迎来到 Electron 👋。</code> 恭喜，您已经在 Electron 中执行了您的第一行代码！ 接下来，您会学习如何用 HTML 创建用户界面，并将它们装载到原生窗口中。</p><h2 id="将网页装载到-browserwindow" tabindex="-1"><a class="header-anchor" href="#将网页装载到-browserwindow" aria-hidden="true">#</a> 将网页装载到 BrowserWindow</h2><p>在 Electron 中，每个窗口展示一个页面，后者可以来自本地的 HTML，也可以来自远程 URL。 <br> 在本例中，您将会装载本地的文件。 在您项目的根目录中创建一个 index.html 文件，并写入下面的内容：</p><div class="language-html ext-html line-numbers-mode"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>UTF-8<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token comment">&lt;!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span>
      <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Content-Security-Policy<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>default-src &#39;self&#39;; script-src &#39;self&#39;<span class="token punctuation">&quot;</span></span>
    <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span>
      <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>X-Content-Security-Policy<span class="token punctuation">&quot;</span></span>
      <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>default-src &#39;self&#39;; script-src &#39;self&#39;<span class="token punctuation">&quot;</span></span>
    <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Hello from Electron renderer!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>Hello from Electron renderer!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>👋<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>现在您有了一个网页，可以将它装载到 Electron 的 BrowserWindow 上了。 将 main.js 中的内容替换成下列代码。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">const</span> <span class="token punctuation">{</span> app<span class="token punctuation">,</span> BrowserWindow <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;Electron&#39;</span><span class="token punctuation">)</span>

<span class="token keyword">const</span> <span class="token function-variable function">createWindow</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> win <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BrowserWindow</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">800</span><span class="token punctuation">,</span>
    <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">600</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>

  win<span class="token punctuation">.</span><span class="token function">loadFile</span><span class="token punctuation">(</span><span class="token string">&#39;index.html&#39;</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

app<span class="token punctuation">.</span><span class="token function">whenReady</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token function">createWindow</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>下面是逐行解释。</p><h3 id="导入模块" tabindex="-1"><a class="header-anchor" href="#导入模块" aria-hidden="true">#</a> 导入模块</h3><p><code>const { app, BrowserWindow } = require(&#39;electron&#39;)</code><br> 在第一行中，我们使用 CommonJS 语法导入了两个 Electron 模块：</p><ul><li>app，它控制您的应用的事件生命周期。</li><li>BrowserWindow，它负责创建和管理应用的窗口。<div class="custom-container tip"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M12 8h.01"></path><path d="M11 12h1v4h1"></path></g></svg><p class="custom-container-title">TIP</p><p>❗ 大小写惯例<br> 您可能注意到了 app 和 BrowserWindow 两个模块名的大小写差异。 Electron 遵循 JavaScript 传统约定，以帕斯卡命名法 (PascalCase) 命名可实例化的类 (如 BrowserWindow, Tray 和 Notification)，以驼峰命名法 (camelCase) 命名不可实例化的函数、变量等 (如 app, ipcRenderer, webContents) 。</p></div></li></ul><div class="custom-container warning"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M12 8v4"></path><path d="M12 16h.01"></path></g></svg><p class="custom-container-title">WARNING</p><p>❗ 在 ELECTRON 中使用 ES 语法<br> Electron 目前对 <a href="https://nodejs.org/api/esm.html" target="_blank" rel="noopener noreferrer">ECMAScript<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a> 语法 (如使用 import 来导入模块) 的支持还不完善。 您可以在 <a href="https://github.com/electron/electron/issues/21457" target="_blank" rel="noopener noreferrer">electron/electron#21457<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a> 这个 issue 中查看 ESM 的适配进展。</p></div><h3 id="将可复用的函数写入实例化窗口" tabindex="-1"><a class="header-anchor" href="#将可复用的函数写入实例化窗口" aria-hidden="true">#</a> 将可复用的函数写入实例化窗口</h3><p><code>createWindow()</code> 函数将您的页面加载到新的 BrowserWindow 实例中：</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">const</span> <span class="token function-variable function">createWindow</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> win <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BrowserWindow</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">800</span><span class="token punctuation">,</span>
    <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">600</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>

  win<span class="token punctuation">.</span><span class="token function">loadFile</span><span class="token punctuation">(</span><span class="token string">&#39;index.html&#39;</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="在应用准备就绪时调用函数" tabindex="-1"><a class="header-anchor" href="#在应用准备就绪时调用函数" aria-hidden="true">#</a> 在应用准备就绪时调用函数</h3><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>app<span class="token punctuation">.</span><span class="token function">whenReady</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token function">createWindow</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Electron 的很多核心模组是 Node.js <a href="https://nodejs.org/api/events.html#events" target="_blank" rel="noopener noreferrer">事件触发器<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a>，遵守 Node.js 的异步事件驱动架构。 app 模块就是其中一个。</p><p>在 Electron 中，只有在 app 模组的 <code>ready</code> 事件能触发后才能创建 <code>BrowserWindows</code> 实例。 您可以借助 <code>app.whenReady()</code> API 来等待此事件，并在该 API 的 <code>promise</code> 被 <code>resolve</code> 时调用 <code>createWindow()</code> 方法。</p><div class="custom-container tip"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M12 8h.01"></path><path d="M11 12h1v4h1"></path></g></svg><p class="custom-container-title">TIP</p><p>❗ 信息<br> 通常我们使用触发器的 <code>.on</code> 函数来监听 Node.js 事件。</p></div><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token operator">+</span> app<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&#39;ready&#39;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token operator">-</span> app<span class="token punctuation">.</span><span class="token function">whenReady</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token function">createWindow</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>但是 Electron 暴露了 <code>app.whenReady()</code> 方法，作为其 <code>ready</code> 事件的专用监听器，这样可以避免直接监听 <code>.on</code> 事件带来的一些问题。 参见 <a href="https://github.com/electron/electron/pull/21972" target="_blank" rel="noopener noreferrer">electron/electron#21972<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a> 。</p><p>此时，运行 start 命令应该能成功地打开一个包含您网页内容的窗口！</p><p>您应用中的每个页面都在一个单独的进程中运行，我们称这些进程为 渲染器 (renderer) 。 渲染器也能访问前端开发常会用到的 API 和工具，例如用于打包并压缩代码的 <a href="https://webpack.js.org/" target="_blank" rel="noopener noreferrer">webpack<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a>，还有用于构建用户界面的 <a href="https://reactjs.org/" target="_blank" rel="noopener noreferrer">React<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a> 。</p><h2 id="管理应用的窗口生命周期" tabindex="-1"><a class="header-anchor" href="#管理应用的窗口生命周期" aria-hidden="true">#</a> 管理应用的窗口生命周期</h2><p>应用窗口在不同操作系统中的行为也不同。 Electron 允许您自行实现这些行为来遵循操作系统的规范，而不是采用默认的强制执行。 您可以通过监听 app 和 BrowserWindow 模组的事件，自行实现基础的应用窗口规范。</p><div class="custom-container tip"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M12 8h.01"></path><path d="M11 12h1v4h1"></path></g></svg><p class="custom-container-title">TIP</p><p>❗ 针对特定进程的控制流 可以检查 Node.js 的 process.platform 变量，帮助您在不同操作系统上运行特定代码。 请注意，Electron 目前只支持三个平台：win32 (Windows), linux (Linux) 和 darwin (macOS) 。</p></div><h2 id="关闭所有窗口时退出应用-windows-linux" tabindex="-1"><a class="header-anchor" href="#关闭所有窗口时退出应用-windows-linux" aria-hidden="true">#</a> 关闭所有窗口时退出应用 (Windows &amp; Linux)</h2><p>在 Windows 和 Linux 上，我们通常希望在关闭一个应用的所有窗口后让它退出。 若要在 Electron 中实现这一点，您可以监听 <code>window-all-closed</code> 事件，并调用 <code>app.quit()</code> 来让应用退出。这不适用于 macOS。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>app<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&#39;window-all-closed&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>process<span class="token punctuation">.</span>platform <span class="token operator">!==</span> <span class="token string">&#39;darwin&#39;</span><span class="token punctuation">)</span> app<span class="token punctuation">.</span><span class="token function">quit</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="如果没有窗口打开则打开一个窗口-macos" tabindex="-1"><a class="header-anchor" href="#如果没有窗口打开则打开一个窗口-macos" aria-hidden="true">#</a> 如果没有窗口打开则打开一个窗口 (macOS)</h2><p>与前二者相比，即使没有打开任何窗口，macOS 应用通常也会继续运行。 在没有窗口可用时调用 app 会打开一个新窗口。</p><p>为了实现这一特性，可以监听模组的 <code>activate</code> 事件，如果没有任何活动的 BrowserWindow，调用 <code>createWindow()</code> 方法新建一个。</p><p>因为窗口无法在 <code>ready</code> 事件前创建，你应当在你的应用初始化后仅监听 <code>activate</code> 事件。 要实现这个，仅监听 <code>whenReady()</code> 回调即可。</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code>app<span class="token punctuation">.</span><span class="token function">whenReady</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token function">createWindow</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  app<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&#39;activate&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>BrowserWindow<span class="token punctuation">.</span><span class="token function">getAllWindows</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token function">createWindow</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="完整实现代码" tabindex="-1"><a class="header-anchor" href="#完整实现代码" aria-hidden="true">#</a> 完整实现代码</h2><p>main.js</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">const</span> <span class="token punctuation">{</span> app<span class="token punctuation">,</span> BrowserWindow <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&#39;Electron&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> <span class="token function-variable function">createWindow</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> win <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BrowserWindow</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">800</span><span class="token punctuation">,</span>
    <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">600</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  win<span class="token punctuation">.</span><span class="token function">loadFile</span><span class="token punctuation">(</span><span class="token string">&#39;index.html&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

app<span class="token punctuation">.</span><span class="token function">whenReady</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token function">createWindow</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  app<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&#39;activate&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>BrowserWindow<span class="token punctuation">.</span><span class="token function">getAllWindows</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">createWindow</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

app<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">&#39;window-all-closed&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>process<span class="token punctuation">.</span>platform <span class="token operator">!==</span> <span class="token string">&#39;darwin&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    app<span class="token punctuation">.</span><span class="token function">quit</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="可选-使用-vs-code-调试" tabindex="-1"><a class="header-anchor" href="#可选-使用-vs-code-调试" aria-hidden="true">#</a> 可选：使用 VS Code 调试</h2><p>如果您希望使用 VS Code 调试您的程序，您需要让 VS Code 监听主进程 (main process) 和渲染器进程 (renderer process) 。 下面为您提供了一个简单的配置文件。 请在根目录新建一个 <code>.vscode</code> 文件夹，然后在其中新建一个 <code>launch.json</code> 配置文件并填写如下内容。</p><div class="language-json ext-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>
  <span class="token property">&quot;version&quot;</span><span class="token operator">:</span> <span class="token string">&quot;0.2.0&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;compounds&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      <span class="token property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;Main + renderer&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;configurations&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;Main&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;Renderer&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token property">&quot;stopAll&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token property">&quot;configurations&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      <span class="token property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;Renderer&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;port&quot;</span><span class="token operator">:</span> <span class="token number">9222</span><span class="token punctuation">,</span>
      <span class="token property">&quot;request&quot;</span><span class="token operator">:</span> <span class="token string">&quot;attach&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;type&quot;</span><span class="token operator">:</span> <span class="token string">&quot;chrome&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;webRoot&quot;</span><span class="token operator">:</span> <span class="token string">&quot;${workspaceFolder}&quot;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
      <span class="token property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;Main&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;type&quot;</span><span class="token operator">:</span> <span class="token string">&quot;node&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;request&quot;</span><span class="token operator">:</span> <span class="token string">&quot;launch&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;cwd&quot;</span><span class="token operator">:</span> <span class="token string">&quot;${workspaceFolder}&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;runtimeExecutable&quot;</span><span class="token operator">:</span> <span class="token string">&quot;${workspaceFolder}/node_modules/.bin/Electron&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;windows&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token property">&quot;runtimeExecutable&quot;</span><span class="token operator">:</span> <span class="token string">&quot;${workspaceFolder}/node_modules/.bin/Electron.CMD&quot;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token property">&quot;args&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;.&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;--remote-debugging-port=9222&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
      <span class="token property">&quot;outputCapture&quot;</span><span class="token operator">:</span> <span class="token string">&quot;std&quot;</span><span class="token punctuation">,</span>
      <span class="token property">&quot;console&quot;</span><span class="token operator">:</span> <span class="token string">&quot;integratedTerminal&quot;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>保存后，当您选择侧边栏的 “运行和调试”，将会出现一个 &quot;Main + renderer&quot; 选项。然后您便可设置断点，并跟踪主进程和渲染器进程中的所有变量。</p><p>上文中我们在 <code>launch.json</code> 所做的其实是创建三个配置项： <code>Main</code> 用来运行主程序，并且暴露出 9222 端口用于远程调试 (--remote-debugging-port=9222) 。 我们将把调试器绑定到那个端口来调试 renderer 。 因为主进程是 Node.js 进程，类型被设置为 node。</p><p><code>Renderer</code> 用来调试渲染器进程。 因为后者是由主进程创建的，我们要把它 “绑定” 到主进程上 ()&quot;request&quot;: &quot;attach&quot;，而不是创建一个新的。 渲染器是 web 进程，因此要选择 chrome 调试器。</p><p><code>Main + renderer</code> 是一个 复合任务，可同时执行前两个任务。</p><div class="custom-container warning"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M12 8v4"></path><path d="M12 16h.01"></path></g></svg><p class="custom-container-title">WARNING</p><p>❗ 警告 由于我们要将进程绑定到 Renderer 任务，您应用中的前几行代码可能会被跳过，因为调试器 (Debugger) 在执行代码之前没有足够的时间进行连接。 在开发环境中，您可以通过刷新页面或者使用 setTimeout 延迟运行代码，来避开这个问题。</p></div><div class="custom-container tip"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M12 8h.01"></path><path d="M11 12h1v4h1"></path></g></svg><p class="custom-container-title">TIP</p><p>❗ 延伸阅读</p><p>如果您希望深挖调试步骤，可以查看以下指南：</p><ul><li><a href="https://www.electronjs.org/zh/docs/latest/tutorial/application-debugging" target="_blank" rel="noopener noreferrer">调试应用<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></li><li><a href="https://www.electronjs.org/zh/docs/latest/tutorial/devtools-extension" target="_blank" rel="noopener noreferrer">DevTools扩展<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></li></ul></div><h2 id="摘要" tabindex="-1"><a class="header-anchor" href="#摘要" aria-hidden="true">#</a> 摘要</h2><p>Electron 程序是通过 npm 包创建的。 您应将 Electron 依赖安装到<code>devDependencies</code>，然后在 package.json 中设置一个脚本来运行。</p><p>执行命令后，Electron 程序会运行您在 package.json 文件的 main 字段设置的入口文件。 这个入口文件控制着 Electron 的主进程，后者运行于 Node.js 实例，负责应用的生命周期、展示原生窗口、执行特殊操作和管理渲染进程。</p><p>渲染器进程（简称渲染器）负责展示图形内容。 您可以将渲染的网页指向 web 地址或本地 HTML 文件。 渲染器和常规的网页行为很相似，访问的 web API 也相同。</p><p>在教程下一节，我们将会学习如何使用 API 给渲染器提权，以及如何在进程间通信。</p></div></div><footer class="page-meta"><div class="meta-item edit-link"><a class="icon-container left meta-item-label" href="https://gitee.com/i77ing/blog.git/edit/master/blogs/Electron/20221108.md" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" style="color:inherit;width:20px;height:20px;font-size:20px;"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 7H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-3"></path><path d="M9 15h3l8.5-8.5a1.5 1.5 0 0 0-3-3L9 12v3"></path><path d="M16 5l3 3"></path></g></svg><span style="color:inherit;font-size:14px;" class="icon-text"><!--[-->Edit this page<!--]--></span></a></div><div class="meta-item last-updated"><a class="icon-container left meta-item-label" href="javascript:void(0)" target="_self"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" style="color:inherit;width:20px;height:20px;font-size:20px;"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11.795 21H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v4"></path><circle cx="18" cy="18" r="4"></circle><path d="M15 3v4"></path><path d="M7 3v4"></path><path d="M3 11h16"></path><path d="M18 16.496V18l1 1"></path></g></svg><span style="color:inherit;font-size:14px;" class="icon-text"><!--[-->Last Updated 2023-02-23 19:57:37<!--]--></span></a></div></footer><nav class="page-nav"><p class="hasNext inner"><!----><span class="page-nav-item next">使用预加载脚本 → </span></p></nav><!----></main><!--]--><div class="page-catalog-container"><h5 class="tip">ON THIS PAGE</h5><ul><!--[--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/blogs/Electron/20221108.html#electron官网" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="Electron官网"><!--[--><!--]--> Electron官网 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/blogs/Electron/20221108.html#初始化-npm-项目" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="初始化 npm 项目"><!--[--><!--]--> 初始化 npm 项目 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/blogs/Electron/20221108.html#添加-gitignore-文件" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="添加 .gitignore 文件"><!--[--><!--]--> 添加 .gitignore 文件 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/blogs/Electron/20221108.html#运行-electron-应用" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="运行 Electron 应用"><!--[--><!--]--> 运行 Electron 应用 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/blogs/Electron/20221108.html#将网页装载到-browserwindow" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="将网页装载到 BrowserWindow"><!--[--><!--]--> 将网页装载到 BrowserWindow <!--[--><!--]--></a></li><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blog/blogs/Electron/20221108.html#导入模块" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="导入模块"><!--[--><!--]--> 导入模块 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blog/blogs/Electron/20221108.html#将可复用的函数写入实例化窗口" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="将可复用的函数写入实例化窗口"><!--[--><!--]--> 将可复用的函数写入实例化窗口 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blog/blogs/Electron/20221108.html#在应用准备就绪时调用函数" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="在应用准备就绪时调用函数"><!--[--><!--]--> 在应用准备就绪时调用函数 <!--[--><!--]--></a></li><!--]--><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/blogs/Electron/20221108.html#管理应用的窗口生命周期" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="管理应用的窗口生命周期"><!--[--><!--]--> 管理应用的窗口生命周期 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/blogs/Electron/20221108.html#关闭所有窗口时退出应用-windows-linux" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="关闭所有窗口时退出应用 (Windows &amp; Linux)"><!--[--><!--]--> 关闭所有窗口时退出应用 (Windows &amp; Linux) <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/blogs/Electron/20221108.html#如果没有窗口打开则打开一个窗口-macos" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="如果没有窗口打开则打开一个窗口 (macOS)"><!--[--><!--]--> 如果没有窗口打开则打开一个窗口 (macOS) <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/blogs/Electron/20221108.html#完整实现代码" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="完整实现代码"><!--[--><!--]--> 完整实现代码 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/blogs/Electron/20221108.html#可选-使用-vs-code-调试" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="可选：使用 VS Code 调试"><!--[--><!--]--> 可选：使用 VS Code 调试 <!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blog/blogs/Electron/20221108.html#摘要" class="router-link-active router-link-exact-active nav-link page-catalog-item" aria-label="摘要"><!--[--><!--]--> 摘要 <!--[--><!--]--></a></li><!--]--><!--]--></ul></div></div></div></div><!----><!----><!--]--></div>
    <script type="module" src="/blog/assets/app.af94fc38.js" defer></script>
  </body>
</html>
